<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线图书馆</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
      #backToTop {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
      }
      #backToTop a {
            display: block;
            margin-bottom: 5px;
            writing-mode: vertical-lr; /* 将文字方向设置为竖排 */
            text-orientation: upright; /* 确保文字方向正确 */
            text-decoration: none; /* 移除默认的下划线 */
            border-bottom: 1px solid black; /* 添加底部边框作为下划线 */
        }
        #controls {
          text-align: center; /* 居中对齐 */
          margin-bottom: 20px; /* 添加一些底部间距 */
          display: flex; /* 使用 flexbox 布局 */
          justify-content: center; /* 水平居中对齐子元素 */
          align-items: center; /* 垂直居中对齐子元素 */
        }
        #search {
          display: inline-block;
          margin-right: 10px; /* 调整搜索框与上传图书按钮之间的间距 */
        }
        #search input[type="text"] {
          display: inline-block;
          width: auto; /* 使搜索框宽度自适应 */
          vertical-align: middle; /* 垂直对齐 */
        }
        #search input[type="submit"] {
          display: inline-block;
          vertical-align: middle; /* 垂直对齐 */
        }
        #upload {
          display: inline-block;
          width: 100px; /* 设置一个明确的宽度 */
        }
        #upload a {
          display: inline-block;
          vertical-align: middle; /* 垂直对齐 */
        }
    </style>
  </head>
  <body>
    {% if 'username' in session %}
      <p>当前用户: {{ session['username'] }} <a href="{{ url_for('logout') }}">退出</a></p>
      
    {% else %}
      <a href="{{ url_for('login') }}">登录</a>
      <a href="{{ url_for('register') }}">注册</a>
    {% endif %}
    <h1>在线图书馆</h1>
    {% if 'username' in session %}
    <div id="controls">
    <div id="search">
      <form action="{{ url_for('search') }}" method="get">
          <input type="text" name="query" placeholder="搜索图书">
          <input type="submit" value="搜索">
      </form>
    </div>
    <div id="upload">
      <a href="{{ url_for('upload') }}">上传图书</a>
    </div>
  </div>
  {% endif %}
    <div id="backToTop">
      <a href="#top">回到顶部</a>
    </div>
    <ul>
      {% for book in books %}
        <li>
          <img src="{{ url_for('static', filename='uploads/' + book[4]) }}" alt="{{ book[1] }} 封面" width="100">
          <p><span style="font-weight:bold;">{{ book[1] }}</span> 作者: {{ book[2] }} 
              <a href="{{ url_for('edit', id=book[0]) }}">编辑</a>
              <a href="{{ url_for('delete', id=book[0]) }}">删除</a>           
          </p>
          <p>{{ book[3] }}</p>
        </li>
      {% else %}
        <li>暂无图书。</li>
      {% endfor %}
    </ul>
    <script>
      window.onscroll = function() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("backToTop").style.display = "block";
        } else {
          document.getElementById("backToTop").style.display = "none";
        }
      };
    </script>
  </body>
</html>